
<!--
 * @Author: ljc
 * @Date: 2023-04-25 15:00:24
 * @LastEditors: g05047
 * @LastEditTime: 2023-05-09 20:11:09
 * @Description: 项目手动分配列表
-->

<template>
  <div>
    <rk-dialog width="1200"
      height="700"
      :title="title"
      :visible="visible"
      :destroyOnClose="true"
      @close="visible = false"
      :maskClosable="false">
      <RkContainer :isFooter="false"
        :isAside=false
        :isHeader="false">
        <template #main>
          <rk-condition>
            <template #condition>
              <rk-condition-bar v-show="true">
                <template #content>
                  <el-form ref="form"
                    :inline="true">
                    <span>任务名称:</span>
                  </el-form>
                </template>
                <template #buttons>
                </template>
              </rk-condition-bar>
            </template>
            <template #content>
              <rk-grid ref="manualTableRef"
                title="手动分配结果"
                dataUrl="/prdFormInfo/queryPrdFormInfoPageList"
                boxConfig
                :params="queryParams"
                :columns="tableColumns">
                <template #operation="{ row }">
                  <div class="operation-box">
                    <el-tag v-for="tag in dynamicTags"
                      :key="tag"
                      class="mx-1"
                      closable
                      :disable-transitions="false"
                      @close="handleClose(tag)">
                      {{ tag }}
                    </el-tag>
                    <el-button class="button-new-tag ml-1"
                      size="small"
                      @click="handleAdd">
                      添加
                    </el-button>
                  </div>
                </template>
              </rk-grid>
            </template>
          </rk-condition>
        </template>
      </RkContainer>
      <template #footer>
        <el-button type="primary"
          @click="handleConfirm">保存</el-button>
        <el-button @click="hanldeClose">取消</el-button>
      </template>
    </rk-dialog>
    <project-add-expert-dialog ref="projectAddExpertDialogViewRef"></project-add-expert-dialog>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import ProjectAddExpertDialog from './ProjectAddExpertDialog.vue'

const { appContext } = getCurrentInstance();
const globalProxy = appContext.config.globalProperties;
const manualTableRef = ref('')
const projectAddExpertDialogViewRef = ref(null)
// 查询参数
let queryParams = reactive({
})
const visible = ref(false)
const title = ref('手动评审结果列表')
const dynamicTags = ref(['Tag 1', 'Tag 2', 'Tag 3'])
const tableColumns = ref([
  {
    field: 'proName', title: '地区名称', width: 250, align: 'left',
  },
  { field: 'fiscalYear1', title: '单位名称', width: 250, align: 'left', },
  { field: 'fiscalYear2', title: '项目编码', width: 120, align: 'left', },
  { field: 'fiscalYear2', title: '项目名称', width: 120, align: 'left', },
  { field: 'fiscalYear3', title: '已分配评审专家', align: 'center', slots: { default: 'operation' } },
])
/** 删除 */
const handleClose = (tag) => {
  dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1)
}
/** 添加 */
const handleAdd = () => {
  projectAddExpertDialogViewRef.value.handleOpen()
}

/** 打开弹出层 */
const handleOpen = (options) => {
  visible.value = true
}
/** 关闭弹窗 */
const hanldeClose = () => {
  visible.value = false
}

/** 确认提交 */
const handleConfirm = () => {
  visible.value = false
}
// 对外暴露方法
defineExpose({
  handleOpen
})

</script>
    <style lang="scss" scoped>
.operation-box {
  display: flex;
  justify-content: space-around;
}
.mr-15px {
  margin-right: 15px;
  &:last-child {
    margin-right: 0;
  }
}
.w-200px {
  width: 200px;
}
</style>
    